<template>
  <div class="dv-capsule-chart" :class="{ 'is-dark': isDark }">
    <div class="chart-container">
      <div
        v-for="(item, index) in chartData"
        :key="index"
        class="chart-item"
      >
        <div class="item-label">{{ item.name }}</div>
        <div class="item-capsule">
          <div class="capsule-track">
            <div
              class="capsule-bar"
              :style="{
                width: `${item.percentage}%`,
                background: getGradient(item.color || colors[index % colors.length])
              }"
            >
              <div class="bar-shine" v-if="isDark"></div>
            </div>
          </div>
          <div class="item-value">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'

interface ChartItem {
  name: string
  value: number
  color?: string
}

interface Props {
  data?: ChartItem[]
}

const props = withDefaults(defineProps<Props>(), {
  data: () => []
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399']

const chartData = computed(() => {
  if (!props.data.length) return []
  
  const max = Math.max(...props.data.map(item => item.value))
  
  return props.data.map(item => ({
    ...item,
    percentage: (item.value / max) * 100
  }))
})

const getGradient = (color: string) => {
  if (isDark.value) {
    return `linear-gradient(90deg, ${color}80 0%, ${color} 50%, ${color}80 100%)`
  }
  return `linear-gradient(90deg, ${color}dd 0%, ${color} 100%)`
}
</script>

<style lang="scss" scoped>
.dv-capsule-chart {
  width: 100%;
  
  .chart-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .chart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .item-label {
      flex-shrink: 0;
      width: 80px;
      font-size: 13px;
      color: #606266;
      text-align: right;
    }
    
    .item-capsule {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      
      .capsule-track {
        flex: 1;
        height: 20px;
        background: rgba(64, 158, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        
        .capsule-bar {
          height: 100%;
          border-radius: 10px;
          position: relative;
          transition: width 1s ease;
          
          .bar-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
              transparent, 
              rgba(255, 255, 255, 0.3), 
              transparent
            );
            animation: shine 2s ease-in-out infinite;
          }
        }
      }
      
      .item-value {
        flex-shrink: 0;
        width: 60px;
        font-size: 14px;
        font-weight: bold;
        color: #409eff;
        font-family: 'DS-Digital', 'Courier New', monospace;
      }
    }
  }
  
  &.is-dark {
    .chart-item {
      .item-label {
        color: #a0cfff;
      }
      
      .item-capsule {
        .capsule-track {
          background: rgba(0, 212, 255, 0.1);
        }
        
        .item-value {
          color: #00d4ff;
          text-shadow: 0 0 10px currentColor;
        }
      }
    }
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
</style>
